<template>
	<div :class="classes">
		<slot></slot>
	</div>
</template>

<script lang="ts">
	import Anes from "../base";
	import { Prop, Watch, Component } from "vue-property-decorator";
	@Component
	export default class Breadcrumb extends Anes {
		@Prop({ type: String, default: "/" }) separator!: string;
		prefixCls = "ivu-breadcrumb";
		get classes() {
			return `${this.prefixCls}`;
		}
		mounted() {
			this.$options.name = "Breadcrumb";
			this.updateChildren();
		}
		updated() {
			this.$nextTick(() => {
				this.updateChildren();
			});
		}
		updateChildren() {
			this.$children.forEach(child => {
				child.$props.separator = this.separator;
			});
		}
		@Watch("separator")
		onSeparatorChange() {
			this.updateChildren();
		}
	}
</script>

 